<template>
  <div class="table-alert-root">
    <div class="table-operator">
      <el-input v-model="tableParams.appName" placeholder="应用名称" />
      <el-input v-model="tableParams.id" placeholder="警告ID" style="margin-left: 10px;" />
      <el-button type="primary" @click="getAlertPage" style="margin-left: 10px;">查询</el-button>
    </div>
    <div class="table">
      <el-table border height="100%" v-loading="tableLoading" tooltip-effect="dark" :data="tableDatas">
        <el-table-column type="expand" width="40">
          <template #default="props">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="警告ID:" :span="2">{{ props.row.id }}</el-descriptions-item>
              <el-descriptions-item label="traceId:" :span="2">{{ props.row.traceId }}</el-descriptions-item>
              <el-descriptions-item label="警告节点:">{{ props.row.hostName }}</el-descriptions-item>

              <el-descriptions-item label="通知:">{{ props.row.notification }}</el-descriptions-item>

              <el-descriptions-item label="警告级别:">{{ props.row.level }}</el-descriptions-item>
              <el-descriptions-item label="环境:">{{ props.row.profilesActive }}</el-descriptions-item>
              <el-descriptions-item label="警告内容:">{{ props.row.content }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column prop="appName" width="110" label="应用" align="left" />
        <el-table-column prop="creTime" width="160" label="警告时间" align="center" />
        <el-table-column prop="title" min-width="300" :show-overflow-tooltip="true" label="警告标题" />
        <el-table-column label="操作" width="125">
          <template #default="scope">
            <el-button @click="toSearchLogByTraceId(scope.row.traceId)" type="info">日志</el-button>
            <el-button @click="readAlert(scope.row.id)" v-if="scope.row.read === false" type="primary">已读</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="table-pagination">
      <el-pagination background small layout="prev, pager, next" @current-change="pageNumChange"
        :current-page="tableParams.pageNum" :page-size="tableParams.pageSize" :total="tableParams.total">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref, onMounted, inject } from "vue";
import { alertPageApi, alertReadApi } from '@/api/alert';

// -------------------- inject
const currentMachine: any = inject('currentMachine')

// -------------------- props
const props = defineProps({
  /**
   * 每页数据, 在首页展示时, 可以设置较小的行数, 在 drawer 展示时, 可以设置较大的行数
   */
  pageSize: { tyle: Number, default: 20 }
})


const tableLoading = ref<boolean>(true);
const tableDatas = ref([]);
const tableParams = ref({
  pageNum: 1,
  pageSize: props.pageSize,
  total: 0,
  id: '',
  appName: '',
  machineId: ''
})

const toSearchLogByTraceId = (traceId: any) => {
  router.push({ path: '/guardcat/indexMonitorLog', query: { traceId: traceId } })
}

const readAlert = (alertId: string) => {
  alertReadApi({ id: alertId }).then(_ => {
    getAlertPage();
  })
}

const getAlertPage = () => {
  tableLoading.value = true;
  tableParams.value.appName = currentMachine.value.appName
  alertPageApi(tableParams.value).then(resp => {
    tableParams.value.total = Number(resp.data.total);
    tableDatas.value = resp.data.datas;
  }).finally(() => {
    setTimeout(() => {
      tableLoading.value = false;
    }, 150);
  })
}

const pageNumChange = (val: number) => {
  tableParams.value.pageNum = val;
  getAlertPage();
}

onMounted(() => {
  getAlertPage();
})


</script>

<style scoped lang="scss">
.table-alert-root {
  @include box(100%, 100%);

  .table-operator {
    @include box(100%, 30px);
    @include flex(row, space-around, flex-start);
  }

  .table {
    @include box(100%, calc(100% - 30px - 30px));

    :deep(.el-table__expanded-cell) {
      padding: 0;
    }

    :deep(.el-tag--small) {
      padding: 0 3px;
    }
  }

  .table-pagination {
    @include flex(row, flex-start, center);
    @include box(100%, 20px);
    margin-top: 10px;
  }

  .to-high {
    @extend .fail-clr;
    border: 1px solid red;

    &:before {
      content: '↑';
      font-size: 15px;
    }
  }
}
</style>